<template>
  <div>
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>
          <span class="span"></span> 供应商管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-input v-model="SupplierName" placeholder="供应商名称"></el-input>
      </el-col>
      <el-col :span="3">
        <el-input v-model="LinkMan" placeholder="联系人"></el-input>
      </el-col>
      <el-col :span="3">
        <el-input v-model="LinkPhone" placeholder="联系电话"></el-input>
      </el-col>

      <el-col :span="1.5">
        <el-button type="primary" @click="searchlist()">查询</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="newDialogVisible = true">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary"  @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <!-- table表格 -->
    <el-table :data="supplierData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="name" label="供应商名称" width="280"></el-table-column>
      <el-table-column prop="linkman" label="联系人" width="80"></el-table-column>
      <el-table-column prop="mobile" label="联系电话" width="280"></el-table-column>
      <el-table-column prop="remark" label="备注" width="280"></el-table-column>
      <el-table-column label="操作 " width="280">
        <template slot-scope="scope">
          <el-button @click="showEditDiog(scope.row)">编辑</el-button>
          <el-button type="danger" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="getNowpage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="this.paramUser.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="supplierListData  .total"
    ></el-pagination>
    <!-- 编辑供应商的对话框 -->
    <el-dialog title="供应商编辑" :visible.sync="editDialogVisible" width="50%">
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="90px">
        <el-form-item label="供应商名称" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item label="联系人" prop="linkman">
          <el-input v-model="editForm.linkman"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item label="联系电话">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item label="备注">
          <el-input v-model="editForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editQuInfo(editForm)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 供应商添加 -->
    <el-dialog title="供应商编辑" :visible.sync="newDialogVisible" width="50%">
      <el-form
        :model="newSupplierList"
        :rules="newSupplierListRules"
        ref="ruleForm"
        label-width="90px"
        class="demo-ruleForm"
      >
        <el-form-item label="供应商名称" prop="name">
          <el-input v-model="newSupplierList.name"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item label="联系人" prop="linkman">
          <el-input v-model="newSupplierList.linkman"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item label="联系电话">
          <el-input v-model="newSupplierList.mobile"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item label="备注">
          <el-input v-model="newSupplierList.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newDialogVisible= false">取 消</el-button>
        <el-button type="primary" @click="getSupplierList('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import suppilerApi from "@/api/suppiler";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      SupplierName: "", //供应商名称
      LinkMan: "", //联系人
      LinkPhone: "", //联系电话
      supplierData: [],
      supplierListData: [], //所有数据
      paramUser: {
        pagenum: 1,
        pagesize: 10
      }, //用户列表参数配置
      //控制编辑供应商对话框的显示与隐藏
      editDialogVisible: false,
      //查询到的共商信息对象
      editForm: {},
      //编辑供应商的验证规则
      editFormRules: {
        name: [
          { required: true, message: "请输入供应商名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        linkman: [
          { required: true, message: "请输入联系人名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },
      ////添加供应商的验证规则
      newSupplierListRules: {
        name: [
          { required: true, message: "请输入供应商名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        linkman: [
          { required: true, message: "请输入联系人名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },
 newDialogVisible: false, //新增数据框开关
      //添加供应商数据
      newSupplierList: {
        name: "",
        linkman: "",
        mobile: "",
        remark: ""
      },
      
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //api封裝供应商管理列表数据
    getTableData() {
      suppilerApi.getSuppierList().then(response => {
        this.supplierListData = response.data;
        // console.log(this.supplierListData);
        this.getNowpage(1);
        console.log(response);
      });
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    getNowpage(nowpage) {
      var start = (nowpage - 1) * this.paramUser.pagesize;
      var end = start + this.paramUser.pagesize; //所有数据
      // console.log(start, end);
      this.supplierData = this.supplierListData.supplierList.slice(start, end); //当前页面的数据
      // console.log(this.supplierData);
    },
    //展示编辑供应商的对话框
    showEditDiog(row) {
      console.log(row);
      this.editForm = row;

      // this.$http.post("/suppiler/:name:/:linkman").then(res => {
      //   console.log(res);
      // });
      this.editDialogVisible = true;
    },

    //监听修改供应商的关闭事件
    // editDialogClose(editFormRef) {
    //   this.$refs.editFormRef.resetFields();
    // },
    editQuInfo(editForm) {
      console.log(editForm);

      suppilerApi.enditSuppier(editForm.linkman).then(res => {
        console.log(res);
        if (res.data.res.code != 200)
          return this.$message.error("编辑数据失败");
        this.$message.success("编辑数据成功");
      });
      //编辑刷新
      this.getTableData();
      this.editDialogVisible = false;
    },
    // api封装delMemberList删除列表数据
    del(row) {
      console.log(row);
      
      this.$confirm("确认删除这条记录吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消"
      }).then(() => {
        suppilerApi.delMeberList(row.id).then(res => {
          console.log(res);
          if (res.data.res.code != 200)
            return this.$message.error("删除列表失败");
          this.$message.success("删除列表成功");

          this.getTableData();
        });
      });
    },
    //搜索数据
    searchlist() {
      suppilerApi.getSearch(this.SupplierName, this.LinkMan).then(res => {
        console.log(res);
        if (res.data.res.code != "200")
          return this.$message.error("查询数据失败");
        this.$message.success("查询数据成功");
        this.getTableData();
      });
    },
  
    //点击新增数据api封装getSupplierAdd
    getSupplierList(formName) {
      console.log(formName);
      this.$refs[formName].validate(valid => {
        if (valid) {
           suppilerApi
            .getSupplierAdd(
              this.newSupplierList.name,
              this.newSupplierList.linkman,
              this.newSupplierList.mobile,
              this.newSupplierList.remark
            )
            .then(res => {
              console.log(res.data.res);
              if (res.data.res.code !== 200)
                return this.$message.error("新增数据失败");
              this.$message.success("数据新增成功");
              this.newSupplierList = "";
              this.getTableData();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置
      reset(){
        this.SupplierName='',
        this.LinkMan='',
        this.LinkPhone=''
      }
  
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getTableData();
    setTimeout(() => {
      this.getNowpage(1);
    }, 100);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.el-table {
  margin-top: 10px;
}
.span {
  width: 5px;
  height: 4px !important;
  background: red;
  border: 1px solid red;
  margin-right: 10px;
}
.el-row {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>